<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧工程监理管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            warning: '#FF7D00',
            danger: '#F53F3F',
            success: '#00B42A',
            dark: '#1D2129',
            'gray-light': '#F2F3F5',
            'gray-medium': '#C9CDD4'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
      }
      .sidebar-item.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card-shadow {
        @apply shadow-sm hover:shadow-md transition-shadow duration-300;
      }
      .stat-card {
        @apply bg-white rounded-xl p-5 card-shadow border border-gray-100;
      }
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200;
      }
      .btn-secondary {
        @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all duration-200;
      }
      .badge {
        @apply text-xs px-2 py-1 rounded-full font-medium;
      }
    }
  </style>
</head>
<body class="bg-gray-light min-h-screen font-sans text-dark">
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white h-full shadow-sm flex flex-col z-10">
      <div class="p-5 border-b border-gray-100">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
            <i class="fa fa-building-o text-white text-xl"></i>
          </div>
          <h1 class="text-xl font-bold text-primary">智慧监理</h1>
        </div>
      </div>
      
      <div class="flex-1 overflow-y-auto py-4">
        <nav class="px-3 space-y-1">
          <p class="px-4 text-xs text-gray-500 uppercase font-medium mb-2">主要功能</p>
          <a href="#dashboard" class="sidebar-item active">
            <i class="fa fa-dashboard w-5 text-center"></i>
            <span>数据总览</span>
          </a>
          <a href="#projects" class="sidebar-item">
            <i class="fa fa-briefcase w-5 text-center"></i>
            <span>项目管理</span>
          </a>
          <a href="#quality" class="sidebar-item">
            <i class="fa fa-check-square-o w-5 text-center"></i>
            <span>质量监督</span>
          </a>
          <a href="#inspection" class="sidebar-item">
            <i class="fa fa-search w-5 text-center"></i>
            <span>巡视检查</span>
          </a>
          <a href="#tasks" class="sidebar-item">
            <i class="fa fa-tasks w-5 text-center"></i>
            <span>任务管理</span>
          </a>
          <a href="#issues" class="sidebar-item">
            <i class="fa fa-exclamation-triangle w-5 text-center"></i>
            <span>问题整改</span>
          </a>
          
          <p class="px-4 text-xs text-gray-500 uppercase font-medium mb-2 mt-6">系统管理</p>
          <a href="#personnel" class="sidebar-item">
            <i class="fa fa-users w-5 text-center"></i>
            <span>人员管理</span>
          </a>
          <a href="#documents" class="sidebar-item">
            <i class="fa fa-file-text-o w-5 text-center"></i>
            <span>资料管理</span>
          </a>
          <a href="#settings" class="sidebar-item">
            <i class="fa fa-cog w-5 text-center"></i>
            <span>系统设置</span>
          </a>
        </nav>
      </div>
      
      <div class="p-4 border-t border-gray-100">
        <div class="flex items-center gap-3">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p class="font-medium text-sm">张监理</p>
            <p class="text-xs text-gray-500">高级监理工程师</p>
          </div>
          <button class="ml-auto text-gray-400 hover:text-gray-600">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>
    
    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white h-16 border-b border-gray-100 flex items-center justify-between px-6 shadow-sm">
        <div class="flex items-center gap-4">
          <button class="lg:hidden text-gray-500 hover:text-primary">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <div class="relative">
            <input type="text" placeholder="搜索项目、人员或文档..." 
                  class="pl-10 pr-4 py-2 bg-gray-light rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
        
        <div class="flex items-center gap-6">
          <button class="relative text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
          </button>
          <button class="relative text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-envelope-o text-xl"></i>
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">5</span>
          </button>
          <div class="h-6 w-px bg-gray-200"></div>
          <div class="flex items-center gap-2">
            <span class="text-sm font-medium">今天</span>
            <span class="text-sm text-gray-500" id="current-date">2023-06-15</span>
          </div>
        </div>
      </header>
      
      <!-- 内容区域 -->
      <div class="flex-1 overflow-y-auto p-6" id="content-area">
        <!-- 数据总览页面 -->
        <div id="dashboard-view" class="space-y-6">
          <div class="flex justify-between items-center">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">项目数据总览</h2>
            <div class="flex gap-3">
              <button class="btn-secondary flex items-center gap-2">
                <i class="fa fa-download"></i>
                <span>导出报表</span>
              </button>
              <button class="btn-primary flex items-center gap-2">
                <i class="fa fa-refresh"></i>
                <span>刷新数据</span>
              </button>
            </div>
          </div>
          
          <!-- 统计卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="stat-card">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-gray-500 text-sm mb-1">在建项目</p>
                  <h3 class="text-3xl font-bold">24</h3>
                  <p class="text-success text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 3 个项目 (本周)
                  </p>
                </div>
                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                  <i class="fa fa-briefcase text-xl"></i>
                </div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-gray-500 text-sm mb-1">今日检查</p>
                  <h3 class="text-3xl font-bold">18</h3>
                  <p class="text-success text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 5 次检查 (较昨日)
                  </p>
                </div>
                <div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center text-secondary">
                  <i class="fa fa-search text-xl"></i>
                </div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-gray-500 text-sm mb-1">待整改问题</p>
                  <h3 class="text-3xl font-bold">12</h3>
                  <p class="text-danger text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 2 个问题 (较昨日)
                  </p>
                </div>
                <div class="w-12 h-12 bg-warning/10 rounded-lg flex items-center justify-center text-warning">
                  <i class="fa fa-exclamation-circle text-xl"></i>
                </div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-gray-500 text-sm mb-1">已完成任务</p>
                  <h3 class="text-3xl font-bold">86%</h3>
                  <p class="text-success text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 4% (本月)
                  </p>
                </div>
                <div class="w-12 h-12 bg-success/10 rounded-lg flex items-center justify-center text-success">
                  <i class="fa fa-check-circle text-xl"></i>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 图表和数据 -->
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 bg-white rounded-xl p-5 card-shadow border border-gray-100">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">项目质量趋势</h3>
                <div class="flex gap-2">
                  <button class="text-sm px-3 py-1 rounded-full bg-primary/10 text-primary">周</button>
                  <button class="text-sm px-3 py-1 rounded-full text-gray-500 hover:bg-gray-100">月</button>
                  <button class="text-sm px-3 py-1 rounded-full text-gray-500 hover:bg-gray-100">年</button>
                </div>
              </div>
              <div class="h-80">
                <canvas id="qualityTrendChart"></canvas>
              </div>
            </div>
            
            <div class="bg-white rounded-xl p-5 card-shadow border border-gray-100">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">问题分类统计</h3>
                <button class="text-gray-400 hover:text-gray-600">
                  <i class="fa fa-ellipsis-v"></i>
                </button>
              </div>
              <div class="h-80">
                <canvas id="issueTypeChart"></canvas>
              </div>
            </div>
          </div>
          
          <!-- 最近项目和待办任务 -->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl p-5 card-shadow border border-gray-100">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">重点项目监控</h3>
                <a href="#projects" class="text-primary text-sm hover:underline">查看全部</a>
              </div>
              <div class="overflow-x-auto">
                <table class="w-full">
                  <thead>
                    <tr class="border-b border-gray-100">
                      <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">项目名称</th>
                      <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">进度</th>
                      <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">状态</th>
                      <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                      <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                          <div class="w-8 h-8 bg-primary/10 rounded flex items-center justify-center text-primary">
                            <i class="fa fa-building"></i>
                          </div>
                          <span>雄安新区科创中心</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <div class="w-32 bg-gray-100 rounded-full h-2">
                          <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                        </div>
                        <span class="text-xs text-gray-500 mt-1 block">75%</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="badge bg-success/10 text-success">正常</span>
                      </td>
                      <td class="py-3 px-2">
                        <button class="text-primary hover:text-primary/80">详情</button>
                      </td>
                    </tr>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                      <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                          <div class="w-8 h-8 bg-primary/10 rounded flex items-center justify-center text-primary">
                            <i class="fa fa-road"></i>
                          </div>
                          <span>新区主干道工程</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <div class="w-32 bg-gray-100 rounded-full h-2">
                          <div class="bg-warning h-2 rounded-full" style="width: 45%"></div>
                        </div>
                        <span class="text-xs text-gray-500 mt-1 block">45%</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="badge bg-warning/10 text-warning">滞后</span>
                      </td>
                      <td class="py-3 px-2">
                        <button class="text-primary hover:text-primary/80">详情</button>
                      </td>
                    </tr>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                      <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                          <div class="w-8 h-8 bg-primary/10 rounded flex items-center justify-center text-primary">
                            <i class="fa fa-home"></i>
                          </div>
                          <span>安置区建设项目</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <div class="w-32 bg-gray-100 rounded-full h-2">
                          <div class="bg-success h-2 rounded-full" style="width: 60%"></div>
                        </div>
                        <span class="text-xs text-gray-500 mt-1 block">60%</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="badge bg-success/10 text-success">正常</span>
                      </td>
                      <td class="py-3 px-2">
                        <button class="text-primary hover:text-primary/80">详情</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="bg-white rounded-xl p-5 card-shadow border border-gray-100">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">待处理任务</h3>
                <a href="#tasks" class="text-primary text-sm hover:underline">查看全部</a>
              </div>
              <div class="space-y-4">
                <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 transition-colors">
                  <div class="flex justify-between items-start">
                    <h4 class="font-medium">钢筋工程验收</h4>
                    <span class="badge bg-danger/10 text-danger">紧急</span>
                  </div>
                  <p class="text-sm text-gray-500 mt-2">雄安新区科创中心3号楼5层钢筋绑扎验收</p>
                  <div class="flex justify-between items-center mt-3">
                    <span class="text-xs text-gray-500">截止时间: 今天 15:00</span>
                    <button class="text-primary text-sm hover:underline">处理</button>
                  </div>
                </div>
                
                <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 transition-colors">
                  <div class="flex justify-between items-start">
                    <h4 class="font-medium">安全隐患复查</h4>
                    <span class="badge bg-warning/10 text-warning">待办</span>
                  </div>
                  <p class="text-sm text-gray-500 mt-2">新区主干道工程K2+300处基坑支护复查</p>
                  <div class="flex justify-between items-center mt-3">
                    <span class="text-xs text-gray-500">截止时间: 今天 18:00</span>
                    <button class="text-primary text-sm hover:underline">处理</button>
                  </div>
                </div>
                
                <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 transition-colors">
                  <div class="flex justify-between items-start">
                    <h4 class="font-medium">监理日志审核</h4>
                    <span class="badge bg-primary/10 text-primary">常规</span>
                  </div>
                  <p class="text-sm text-gray-500 mt-2">安置区建设项目5月第3周监理日志审核</p>
                  <div class="flex justify-between items-center mt-3">
                    <span class="text-xs text-gray-500">截止时间: 明天 10:00</span>
                    <button class="text-primary text-sm hover:underline">处理</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  
  <!-- 问题上报弹窗 (默认隐藏) -->
  <div id="report-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl w-full max-w-md p-6 shadow-lg transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-bold">上报质量问题</h3>
        <button id="close-modal" class="text-gray-400 hover:text-gray-600">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <form>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">所属项目</label>
          <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30">
            <option>雄安新区科创中心</option>
            <option>新区主干道工程</option>
            <option>安置区建设项目</option>
          </select>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">问题类型</label>
          <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30">
            <option>结构安全</option>
            <option>材料质量</option>
            <option>施工工艺</option>
            <option>安全文明</option>
            <option>其他问题</option>
          </select>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">问题描述</label>
          <textarea rows="4" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30" placeholder="请详细描述发现的问题..."></textarea>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">上传图片</label>
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors">
            <i class="fa fa-upload text-gray-400 text-2xl mb-2"></i>
            <p class="text-sm text-gray-500">点击或拖拽文件到此处上传</p>
            <p class="text-xs text-gray-400 mt-1">支持JPG、PNG格式，最大5MB</p>
            <input type="file" class="hidden" multiple accept="image/*">
          </div>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">整改责任人</label>
          <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30">
            <option>李施工 - 施工队长</option>
            <option>王技术 - 技术员</option>
            <option>赵经理 - 项目经理</option>
          </select>
        </div>
        
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-1">整改期限</label>
          <input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30">
        </div>
        
        <div class="flex gap-3">
          <button type="button" id="cancel-report" class="flex-1 btn-secondary">取消</button>
          <button type="submit" class="flex-1 btn-primary">提交上报</button>
        </div>
      </form>
    </div>
  </div>
  
  <script>
    // 设置当前日期
    document.addEventListener('DOMContentLoaded', function() {
      const today = new Date();
      const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
      document.getElementById('current-date').textContent = today.toLocaleDateString('zh-CN', options).replace(/\//g, '-');
      
      // 初始化质量趋势图表
      const qualityCtx = document.getElementById('qualityTrendChart').getContext('2d');
      new Chart(qualityCtx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [
            {
              label: '质量评分',
              data: [85, 82, 88, 90, 87, 89, 92],
              borderColor: '#165DFF',
              backgroundColor: 'rgba(22, 93, 255, 0.1)',
              tension: 0.3,
              fill: true
            },
            {
              label: '安全评分',
              data: [80, 84, 82, 86, 88, 85, 87],
              borderColor: '#00B42A',
              backgroundColor: 'rgba(0, 180, 42, 0.1)',
              tension: 0.3,
              fill: true
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'top',
            }
          },
          scales: {
            y: {
              min: 70,
              max: 100
            }
          }
        }
      });
      
      // 初始化问题类型图表
      const issueCtx = document.getElementById('issueTypeChart').getContext('2d');
      new Chart(issueCtx, {
        type: 'doughnut',
        data: {
          labels: ['结构安全', '材料质量', '施工工艺', '安全文明', '其他'],
          datasets: [{
            data: [15, 25, 30, 20, 10],
            backgroundColor: [
              '#F53F3F',
              '#FF7D00',
              '#165DFF',
              '#00B42A',
              '#86909C'
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
            }
          },
          cutout: '70%'
        }
      });
      
      // 侧边栏导航切换
      const sidebarItems = document.querySelectorAll('.sidebar-item');
      sidebarItems.forEach(item => {
        item.addEventListener('click', function(e) {
          e.preventDefault();
          sidebarItems.forEach(i => i.classList.remove('active'));
          this.classList.add('active');
          // 这里可以添加页面切换逻辑
        });
      });
      
      // 模态框控制
      const reportModal = document.getElementById('report-modal');
      const closeModal = document.getElementById('close-modal');
      const cancelReport = document.getElementById('cancel-report');
      
      // 打开模态框的按钮可以在这里添加事件监听
      // 现在先模拟一个按钮点击
      setTimeout(() => {
        // 实际应用中会有一个"上报问题"按钮来触发这个事件
      }, 3000);
      
      function openModal() {
        reportModal.classList.remove('hidden');
        reportModal.classList.add('flex');
        document.body.style.overflow = 'hidden';
      }
      
      function closeModalFunc() {
        reportModal.classList.add('hidden');
        reportModal.classList.remove('flex');
        document.body.style.overflow = '';
      }
      
      closeModal.addEventListener('click', closeModalFunc);
      cancelReport.addEventListener('click', closeModalFunc);
      
      // 点击模态框外部关闭
      reportModal.addEventListener('click', function(e) {
        if (e.target === reportModal) {
          closeModalFunc();
        }
      });
    });
  </script>
</body>
</html>
